<template>
	<up-collapse :border="false">
		<up-collapse-item :title="item.title" :label="item.createTime" v-for="item in messageList" :key="item.title"
			titleStyle="font-size:32rpx;color:#333">
			<!-- <template #icon>
				<up-badge :isDot="true" :type="item.isRead ? 'info' : 'primary'"></up-badge>
			</template> -->
			<template #title>
				<view class="flex align-center">
					<view class="badge" :style="{ backgroundColor: item.isRead ? '#D8D8D8' : '#FF9F19' }"></view>
					<text class="title" :class="{ 'read': item.isRead }">{{ item.title }}</text>
				</view>
			</template>
			<u-text size="26rpx" :color="item.isRead ? '#999999' : '#666666'" :text="item.content"></u-text>
		</up-collapse-item>
	</up-collapse>
</template>

<script setup>
import { ref } from 'vue';
const messageList = ref([
	{
		title: '今日学习报告',
		isRead: false,
		createTime: '2025-01-01 12:00:00',
		content: '张三同学，请本周六上午8点到10点之间在备份'
	},
	{
		title: '今日学习报告',
		isRead: true,
		createTime: '2025-01-01 12:00:00',
		content: '张三同学，请本周六上午8点到10点之间在备份'
	}
]);
</script>

<style scoped lang="scss">
.badge {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	display: inline-block;
	margin-right: 10rpx;
}

.title {
	font-size: 32rpx;
	color: #333;

	&.read {
		color: #999999 !important;
	}
}
</style>